<template>
	<upper-navigation>社区交流</upper-navigation>
	<view id="community">
		<view class="waterfall-container">
			<view class="left">
				<view class="content-container"
				v-for="(item,index) in dataSourse.LeftList" :key="index">
					<navigator :url="'./CommunityDetail?id=' + item.ID" class="content-item">
						<view class="content-header">
							<image :src=" domain + ( item.Creator.Avatar || '/default.png' ) " class="avatar" />
							<view class="creat">
								<view class="author">
									{{ item.Author }}
								</view>
								<view class="created-time">
									{{ item.CreatedOn }}
								</view>
							</view>
						</view>
						<image :src="domain + item.Cover" class="content-image" mode="widthFix" />
						<view class="content-text">
							{{item.Topic}}
						</view>
						<image :src=" domain + '/static/Community/rootBackImg.png'" class="bg-img" />
					</navigator>
				</view>
			</view>
			<view class="right">
				<view class="content-container" 
				v-for="(item,index) in dataSourse.RightList" :key="index">
					<navigator :url="'./CommunityDetail?id=' + item.ID" class="content-item">
						<view class="content-header">
							<image :src=" domain + ( item.Creator.Avatar || '/default.png' ) " class="avatar" />
							<view class="creat">
								<view class="author">
									{{ item.Author }}
								</view>
								<view class="created-time">
									{{ item.CreatedOn }}
								</view>
							</view>
						</view>
						<image :src="domain + item.Cover" class="content-image" mode="widthFix" />
						<view class="content-text">
							{{item.Topic}}
						</view>
						<image :src=" domain + '/static/Community/rootBackImg.png'" class="bg-img" />
					</navigator>
				</view>
			</view>
		</view>
	</view>
	<bottom-bar></bottom-bar>
</template>

<script setup>
	import upperNavigation from './upperNavigation.vue'
	import bottomBar from './bottomNavigationBar.vue'
	import { ref, reactive, onMounted } from "vue";
	import { domain } from '../../stores/useApp.js'
	import { onLoad } from "@dcloudio/uni-app"
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	//帖子和导航栏数据结构
	const dataSourse = reactive({
		LeftList: [],
		RightList: [],
		letfH: 0,
		rightH: 0,
		Page: 1,
		PageSize: 10,
	});
	let index = 0; //初始页面
	//加载内容
	getThreadsData();
	
	//帖子内容
	async function getThreadsData() {
		let msg = await uni.post("/uc/forums/GetMyThreads", {
			Page: dataSourse.Page,
			PageSize: dataSourse.PageSize,
		});
		//将获取内容添加至瀑布流
		doList(msg.data);
	}
	function reset() {
		dataSourse.LeftList = [];
		dataSourse.RightList =[],
		dataSourse.letfH = 0;
		dataSourse.rightH = 0;
		dataSourse.Page = 1;
	}
	//下拉刷新
	onPullDownRefresh(() => {
		//清空，重置
		reset();
		//重新获取内容后 停止刷新
		getThreadsData().then(() => {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500);
		})
	})

	//下拉加载
	onReachBottom(() => {
		dataSourse.Page ++;
		getThreadsData();
	})
	
	//瀑布流
	function getHeight(src) {
	   return new Promise((resolve, reject) => {
		   uni.getImageInfo({
			   src: src,
			   success: (image) => {
				   resolve(image.height/image.width);
			   }
		   });
	   });
   }
	
	function doList(dataList) {
		let currentIndex = 0;
		const dataListLength = dataList.length;
		// 顺序处理 dataList

		function nextImage() {
			if (currentIndex < dataListLength) {
				const res = dataList[currentIndex];
				getHeight(domain + res.Cover)
					.then((showH) => {
						if (dataSourse.letfH <= dataSourse.rightH) {
							dataSourse.letfH += showH;
							dataSourse.LeftList.push(res);
						} 
						else {
							dataSourse.rightH += showH;
							dataSourse.RightList.push(res);
						}
						currentIndex++;
						nextImage(); // 处理下一个图像
					})
			}
		}
		nextImage()
	}
	
	 
	
</script>

<style lang="less">
	@item-bg-color: #EBF3F8;

	#community {
		padding: 0 30rpx;
		.waterfall-container {
			margin: 10rpx 0;
			display: flex;
			justify-content: space-between;
			.left , .right {
				width: calc(50% - 15rpx);
				// width: 330rpx;
				.content-container {
					margin: 20rpx 0;
					width: 100%;
					background-color: @item-bg-color;
					border-radius: 25rpx;
					.content-item {
						position: relative;
						padding: 50rpx 30rpx;
						box-sizing: border-box;
						font-size: 25rpx;
						.content-header {
							display: flex;
							height: 72rpx;
							.avatar {
								width: 53rpx;
								height: 53rpx;
								border-radius: 50%;
								margin: auto 0;
							}
							.creat {
								margin-left: 35rpx;
								flex: 1;
								.author {
									line-height: 36rpx;
								}
								.created-time {
									line-height: 36rpx;
									font-size: 20rpx;
									color: #575757;
								}
							}
						}
						.content-image {
							width: 100%;
							margin: 25rpx 0;
							background-color: #fff;
						}
						.content-text {
							word-wrap: break-word;
							display: -webkit-box;
							-webkit-line-clamp: 2; /* 控制最大行数为2 */
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.footer {
							text-align: right;
							color: #818080;
							cursor: pointer;
						}
						.bg-img {
							position: absolute;
							width: 185rpx;
							height: 115rpx;
							bottom: 0;
							right: 0;
						}
					}
				}
			}
			
			
		}
		
	}
	.to-add {
		position: fixed;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: rgb(109,131,152);
		bottom: 200rpx;
		right: 50rpx;
		text-align: center;
		font-size: 80rpx;
		color: #fff;
	}	
</style>
